<!--
 * @Author: liaoxing
 * @Date: 2022-02-16 10:50:39
 * @LastEditors: liaoxing
 * @LastEditTime: 2022-02-22 16:22:47
 * @Description: liaoxing created
 * @FilePath: \pin-xin-admin\src\views\business\financial\outIncome.vue
-->
<template>
  <div class="outIncome">
    <header class="flex-center">{{ currentYear + pageTitle }}</header>
    <main>
      <div class="searchBox flex relative">
        <el-form style="width: 50%" :inline="true" :model="searchValue">
          <el-form-item label="查询月份">
            <el-date-picker
              v-model="searchValue.statMonth"
              type="month"
              value-format="yyyy-MM"
              @change="queryReportOutputValueRevenue"
              placeholder="选择月">
            </el-date-picker>
            <!-- <el-select v-model="searchValue.statMonth" placeholder="请选择" @change="queryReportOutputValueRevenue">
              <el-option
                v-for="item in dateList"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select> -->
          </el-form-item>
        </el-form>
        <span class="absolute" style="right: 0px; top: 20px">单位：万元</span>
      </div>
      <div class="tableBox">
        <el-table
          v-loading="loading"
          :data="tableData"
          border
          stripe
          style="width: 100%; margin-top: 20px">
          <el-table-column
            prop="companyType"
            align="center"
            label="公司名称">
          </el-table-column>
          <el-table-column
            prop="outputTotal"
            align="center"
            label="产值（统计申报）">
          </el-table-column>
          <el-table-column
            prop="revenueTotal"
            align="center"
            label="营收（税务申报）">
          </el-table-column>
        </el-table>
      </div>
      <div class="uploadBox flex-align-center">
        <uploadFile :fileType="['xlsx']" :fileSize="10" :url="baseUrl + '/api/v1/reportOutputValueRevenue/upload'" @handleUpload="handleUpload" :btnName="'上传文件'"></uploadFile>
      </div>
    </main>
  </div>
</template>

<script>
import report from "@/api/report/outputIncome"
import timeTrans from '@/utils/timeTrans'
import uploadFile from '@/components/uploadFile'
export default {
  name: "outIncome",
  components: {
    uploadFile
  },
  data () {
    return {
      loading: false,
      pageTitle: "年主要公司产值与营收",
      // currentYear: new Date().getFullYear(),
      searchValue: {
        statMonth: timeTrans.getYM(new Date().getTime(), '-')
      },
      baseUrl: window.repoortURL,
      tableData: [],
      dateList: [
        {label: "2021-01", value: "2021-01"},
        {label: "2021-02", value: "2021-02"},
        {label: "2021-03", value: "2021-03"},
        {label: "2021-04", value: "2021-04"},
        {label: "2021-05", value: "2021-05"},
        {label: "2021-06", value: "2021-06"},
        {label: "2021-07", value: "2021-07"},
        {label: "2021-08", value: "2021-08"},
        {label: "2021-09", value: "2021-09"},
        {label: "2021-10", value: "2021-10"},
        {label: "2021-11", value: "2021-11"},
        {label: "2021-12", value: "2021-12"}

      ]
    }
  },
  computed: {
    currentYear: function () {
      return this.searchValue.statMonth.split('-')[0]
    }
  },
  created () {
    this.queryReportOutputValueRevenue()
  },
  methods: {
    queryReportOutputValueRevenue () {
      this.loading = true
      console.log(this.searchValue.statMonth)
      report.queryReportOutputValueRevenue({"statMonth": this.searchValue.statMonth})
        .then(res => {
          this.loading = false
          if (res.code === 200) {
            let data = res.data
            data.data.push({companyType: "合计", outputTotal: data.total.outputValueTotal, revenueTotal: data.total.revenueTotal})
            this.tableData = data.data
          } else {
            this.$message.error(res.code + '-' + res.msg)
          }
        })
        .catch(e => {
          this.$message.error(e.toString())
        })
    },
    handleUpload (res) {
      if (res.code === 200) {
        this.queryReportOutputValueRevenue()
      }
    }
  }
}
</script>

<style lang="less">
.outIncome{
  width: 100%;
  height: calc(100vh - 84px);
  box-sizing: border-box;
  padding: 16px;
  position: relative;
  header{
    height: 55px;
    font-size: 36px;
    font-weight: 700;
  }
  main{
    .searchBox{
      background-color: unset;
    }
    .uploadBox{
      height: 60px;
    }
  }
}
</style>